<template>
  <div class="listLinkIndexMain">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="7" :md="7" :lg="7" :xl="7">
        <Feature :titleName="'素材统计'">
          <slot>
            <el-skeleton :rows="1" animated v-if="skeletonQdkjType" v-for="item in 5" class="zylMB30"/>
            <el-row :gutter="10">
              <el-col :xs="6" :sm="12" :md="6" :lg="6" :xl="6">
                <div class="listLinkStatistics">
                  <div class="titleName">前端框架</div>
                  <div class="number">{{ qdkjList.length }}</div>
                </div>
              </el-col>
              <el-col :xs="6" :sm="12" :md="6" :lg="6" :xl="6">
                <div class="listLinkStatistics">
                  <div class="titleName">常用工具</div>
                  <div class="number">{{ cygjList.length }}</div>
                </div>
              </el-col>
              <el-col :xs="6" :sm="12" :md="6" :lg="6" :xl="6">
                <div class="listLinkStatistics">
                  <div class="titleName">字体图标</div>
                  <div class="number">{{ zttbList.length }}</div>
                </div>
              </el-col>
              <el-col :xs="6" :sm="12" :md="6" :lg="6" :xl="6">
                <div class="listLinkStatistics">
                  <div class="titleName">素材图片</div>
                  <div class="number">{{ cctpList.length }}</div>
                </div>
              </el-col>
              <el-col :xs="6" :sm="12" :md="6" :lg="6" :xl="6">
                <div class="listLinkStatistics">
                  <div class="titleName">实用插件</div>
                  <div class="number">{{ sycjList.length }}</div>
                </div>
              </el-col>
              <el-col :xs="6" :sm="12" :md="6" :lg="6" :xl="6">
                <div class="listLinkStatistics">
                  <div class="titleName">素材网站</div>
                  <div class="number">{{ scwzList.length }}</div>
                </div>
              </el-col>
            </el-row>
          </slot>
        </Feature>
        <Feature :titleName="'常用链接'">
          <slot>
            <div class="linkMain">
              <el-skeleton :rows="1" animated v-if="skeletonTopType" v-for="item in 5" class="zylMB30"/>
              <template v-for="(item, index) in websiteList">
                <el-tag class="zylCursor" @click="jump(item)" v-if="item.linktype === '前端框架'">{{ item.title }}</el-tag>
                <el-tag class="zylCursor" @click="jump(item)" type="success" v-if="item.linktype === '常用工具'">{{ item.title }}</el-tag>
                <el-tag class="zylCursor" @click="jump(item)" type="info" v-if="item.linktype === '字体图标'">{{ item.title }}</el-tag>
                <el-tag class="zylCursor" @click="jump(item)" type="warning" v-if="item.linktype === '素材图片'">{{ item.title }}</el-tag>
                <el-tag class="zylCursor" @click="jump(item)" type="danger" v-if="item.linktype === '实用插件'">{{ item.title }}</el-tag>
                <el-tag class="zylCursor" @click="jump(item)" type="info" v-if="item.linktype === '素材网站'">{{ item.title }}</el-tag>
              </template>
            </div>
          </slot>
        </Feature>
      </el-col>
      <el-col :xs="24" :sm="17" :md="17" :lg="17" :xl="17">
        <Feature :titleName="'前端框架'">
          <slot>
            <div class="linksTypeMain">
              <div>用于收藏自身使用过得前端框架</div>
            </div>
            <el-row :gutter="10">
              <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6" v-for="item in 4" v-if="skeletonQdkjType">
                <el-skeleton :rows="2" animated class="zylMB30"/>
              </el-col>
              <template v-for="(item, index) in qdkjList">
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                  <div class="linksMain zylTransition" @click="jump(item)">
                    <div class="linkLeft zylTransition">
                      <div class="linksNormal zylTransition" v-if="item.linkstate === '正常'">{{ item.linkstate }}</div>
                      <div class="linksAbnormal zylTransition" v-if="item.linkstate === '异常'">{{ item.linkstate }}</div>
                      <div class="linksInvalid zylTransition" v-if="item.linkstate === '失效'">{{ item.linkstate }}</div>
                    </div>
                    <div class="linkRight zylTransition">
                      <div class="linkTitle zylSpace zylTransition">{{ item.title }}</div>
                      <div class="zylDescribe">{{ item.creationtime }}</div>
                      <div class="linkText zylDescribe zylSpace">类别：{{ item.linktype }}</div>
                      <div class="linkText zylDescribe zylSpace">地址：{{ item.linkurl }}</div>
                    </div>
                  </div>
                </el-col>
              </template>
            </el-row>
          </slot>
        </Feature>

        <Feature :titleName="'常用工具'">
          <slot>
            <div class="linksTypeMain">
              <div>用于收藏自身使用过得一些工具</div>
            </div>
            <el-row :gutter="10">
              <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6" v-for="item in 4" v-if="skeletonCygjType">
                <el-skeleton :rows="2" animated class="zylMB30"/>
              </el-col>
              <template v-for="(item, index) in cygjList">
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                  <div class="linksMain zylTransition" @click="jump(item)">
                    <div class="linkLeft zylTransition">
                      <div class="linksNormal zylTransition" v-if="item.linkstate === '正常'">{{ item.linkstate }}</div>
                      <div class="linksAbnormal zylTransition" v-if="item.linkstate === '异常'">{{ item.linkstate }}</div>
                      <div class="linksInvalid zylTransition" v-if="item.linkstate === '失效'">{{ item.linkstate }}</div>
                    </div>
                    <div class="linkRight zylTransition">
                      <div class="linkTitle zylSpace zylTransition">{{ item.title }}</div>
                      <div class="zylDescribe">{{ item.creationtime }}</div>
                      <div class="linkText zylDescribe zylSpace">类别：{{ item.linktype }}</div>
                      <div class="linkText zylDescribe zylSpace">地址：{{ item.linkurl }}</div>
                    </div>
                  </div>
                </el-col>
              </template>
            </el-row>
          </slot>
        </Feature>

        <Feature :titleName="'字体图标'">
          <slot>
            <div class="linksTypeMain">
              <div>用于收藏目前常用的字体图标库</div>
            </div>
            <el-row :gutter="10">
              <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6" v-for="item in 4" v-if="skeletonZttbType">
                <el-skeleton :rows="2" animated class="zylMB30"/>
              </el-col>
              <template v-for="(item, index) in zttbList">
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                  <div class="linksMain zylTransition" @click="jump(item)">
                    <div class="linkLeft zylTransition">
                      <div class="linksNormal zylTransition" v-if="item.linkstate === '正常'">{{ item.linkstate }}</div>
                      <div class="linksAbnormal zylTransition" v-if="item.linkstate === '异常'">{{ item.linkstate }}</div>
                      <div class="linksInvalid zylTransition" v-if="item.linkstate === '失效'">{{ item.linkstate }}</div>
                    </div>
                    <div class="linkRight zylTransition">
                      <div class="linkTitle zylSpace zylTransition">{{ item.title }}</div>
                      <div class="zylDescribe">{{ item.creationtime }}</div>
                      <div class="linkText zylDescribe zylSpace">类别：{{ item.linktype }}</div>
                      <div class="linkText zylDescribe zylSpace">地址：{{ item.linkurl }}</div>
                    </div>
                  </div>
                </el-col>
              </template>
            </el-row>
          </slot>
        </Feature>

        <Feature :titleName="'素材图片'">
          <slot>
            <div class="linksTypeMain">
              <div>用于收藏目前常用的图片素材库</div>
            </div>
            <el-row :gutter="10">
              <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6" v-for="item in 4" v-if="skeletonSctpType">
                <el-skeleton :rows="2" animated class="zylMB30"/>
              </el-col>
              <template v-for="(item, index) in cctpList">
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                  <div class="linksMain zylTransition" @click="jump(item)">
                    <div class="linkLeft zylTransition">
                      <div class="linksNormal zylTransition" v-if="item.linkstate === '正常'">{{ item.linkstate }}</div>
                      <div class="linksAbnormal zylTransition" v-if="item.linkstate === '异常'">{{ item.linkstate }}</div>
                      <div class="linksInvalid zylTransition" v-if="item.linkstate === '失效'">{{ item.linkstate }}</div>
                    </div>
                    <div class="linkRight zylTransition">
                      <div class="linkTitle zylSpace zylTransition">{{ item.title }}</div>
                      <div class="zylDescribe">{{ item.creationtime }}</div>
                      <div class="linkText zylDescribe zylSpace">类别：{{ item.linktype }}</div>
                      <div class="linkText zylDescribe zylSpace">地址：{{ item.linkurl }}</div>
                    </div>
                  </div>
                </el-col>
              </template>
            </el-row>
          </slot>
        </Feature>

        <Feature :titleName="'实用插件'">
          <slot>
            <div class="linksTypeMain">
              <div>用于收藏自身使用过得插件库</div>
            </div>
            <el-row :gutter="10">
              <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6" v-for="item in 4" v-if="skeletonSycjType">
                <el-skeleton :rows="2" animated class="zylMB30"/>
              </el-col>
              <template v-for="(item, index) in sycjList">
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                  <div class="linksMain zylTransition" @click="jump(item)">
                    <div class="linkLeft zylTransition">
                      <div class="linksNormal zylTransition" v-if="item.linkstate === '正常'">{{ item.linkstate }}</div>
                      <div class="linksAbnormal zylTransition" v-if="item.linkstate === '异常'">{{ item.linkstate }}</div>
                      <div class="linksInvalid zylTransition" v-if="item.linkstate === '失效'">{{ item.linkstate }}</div>
                    </div>
                    <div class="linkRight zylTransition">
                      <div class="linkTitle zylSpace zylTransition">{{ item.title }}</div>
                      <div class="zylDescribe">{{ item.creationtime }}</div>
                      <div class="linkText zylDescribe zylSpace">类别：{{ item.linktype }}</div>
                      <div class="linkText zylDescribe zylSpace">地址：{{ item.linkurl }}</div>
                    </div>
                  </div>
                </el-col>
              </template>
            </el-row>
          </slot>
        </Feature>

        <Feature :titleName="'素材网站'">
          <slot>
            <div class="linksTypeMain">
              <div>用于收藏经常使用到的素材库</div>
            </div>
            <el-row :gutter="10">
              <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6" v-for="item in 4" v-if="skeletonScwzType">
                <el-skeleton :rows="2" animated class="zylMB30"/>
              </el-col>
              <template v-for="(item, index) in scwzList">
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                  <div class="linksMain zylTransition" @click="jump(item)">
                    <div class="linkLeft zylTransition">
                      <div class="linksNormal zylTransition" v-if="item.linkstate === '正常'">{{ item.linkstate }}</div>
                      <div class="linksAbnormal zylTransition" v-if="item.linkstate === '异常'">{{ item.linkstate }}</div>
                      <div class="linksInvalid zylTransition" v-if="item.linkstate === '失效'">{{ item.linkstate }}</div>
                    </div>
                    <div class="linkRight zylTransition">
                      <div class="linkTitle zylSpace zylTransition">{{ item.title }}</div>
                      <div class="zylDescribe">{{ item.creationtime }}</div>
                      <div class="linkText zylDescribe zylSpace">类别：{{ item.linktype }}</div>
                      <div class="linkText zylDescribe zylSpace">地址：{{ item.linkurl }}</div>
                    </div>
                  </div>
                </el-col>
              </template>
            </el-row>
          </slot>
        </Feature>

      </el-col>
    </el-row>
  </div>
</template>
<script>
import '@/assets/scss/index.scss';
import Feature from '@/components/Feature';
import Interface from './serve/api';
export default {
  // 作者收藏
  name: 'websiteIndex',
  components: {
    Feature,
  },
  data () {
    return {
      qdkjList: [],
      cygjList: [],
      zttbList: [],
      cctpList: [],
      sycjList: [],
      scwzList: [],
      websiteList: [],
      skeletonTopType: true,
      skeletonCygjType: true,
      skeletonZttbType: true,
      skeletonSctpType: true,
      skeletonQdkjType: true,
      skeletonSycjType: true,
      skeletonScwzType: true,
    }
  },
  mounted () {
    this.getZylWebsiteStateLinktype('前端框架');
    this.getZylWebsiteStateLinktype('常用工具');
    this.getZylWebsiteStateLinktype('字体图标');
    this.getZylWebsiteStateLinktype('素材图片');
    this.getZylWebsiteStateLinktype('实用插件');
    this.getZylWebsiteStateLinktype('素材网站');
    this.getZylWebsiteState();
  },
  methods: {
    // 素材列表
    getZylWebsiteStateLinktype (type) {
      let params = {
        state: '是',
        linktype: type,
      };
      Interface.getZylWebsiteStateLinktype(params).then(res => {
        if(res.status === 200) {
          switch (type) {
            case '前端框架':
              this.skeletonQdkjType = false;
              this.qdkjList = res.data;
              break
            case '常用工具':
              this.skeletonCygjType = false;
              this.cygjList = res.data;
              break
            case '字体图标':
              this.skeletonZttbType = false;
              this.zttbList = res.data;
              break
            case '素材图片':
              this.skeletonSctpType = false;
              this.cctpList = res.data;
              break
            case '实用插件':
              this.skeletonSycjType = false;
              this.sycjList = res.data;
              break
            case '素材网站':
              this.skeletonScwzType = false;
              this.scwzList = res.data;
              break
          }
        };
      })
    },

    // 常用链接
    getZylWebsiteState () {
      let params = {
        state: '是',
        showtype: '常用链接',
      };
      Interface.getZylWebsiteState(params).then(res => {
        if(res.status === 200) {
          this.skeletonTopType = false;
          this.websiteList = res.data;
        }
      })
    },

    // 跳转
    jump (item) {
      window.open(item.linkurl, '_blank');
    },
  },
}
</script>
